<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024-01-05
  Time: 10:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: 宋体;
        }
        body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            background: url("../img/img.png");
            background-size: cover;
        }
        .zhuti{
            width: 900px;
            height: 500px;
            display: flex;
            position: relative;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 40px 50px #000000;
        }
        .logon{
            width: 450px;
            height: 500px;
            display: flex;
            position: fixed;
            top: 0px;
            left: 0px;
            align-items: center;
            transition: all 1s ;
            flex-direction: column;
            justify-content: center;
            background-color: #ffffff;
            border-radius: 10px 0 0 10px;
        }
        .register{
            width: 450px;
            height: 500px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .ann{
            width: 250px;
            height: 50px;
            color: #ffffff;
            cursor: pointer;
            position: fixed;
            top: 225px;
            left: 550px;
            line-height: 50px;
            text-align: center;
            background: #0072a1;
            border-radius: 50px;
            opacity: 1;
        }
        .dl{
            font-size: 40px;
            font-weight: bold;
            margin:0 0 15px 0;
        }
        input{
            width: 350px;
            height: 40px;
            margin-top: 15px;
        }
        a{
            text-decoration: none;
            color: #9d9d9d;
        }
        .a{
            margin-top: 25px;
        }
        .denli{
            width: 150px;
            height: 40px;
            color: #ffffff;
            margin-top: 30px;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            background: #0072a1;
            border-radius: 30px;
        }
        .zhuce{
            position: fixed;
            z-index: 1;
            opacity: 0;
        }
        .denlu{
            position: fixed;
            z-index: 2;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="zhuti">
    <div class="logon">
        <div class="denlu">
            <div class="dl">欢迎登录</div>
            <div><input type="text" placeholder="请输入邮箱"></div>
            <div><input type="text" placeholder="请输入密码"></div>
            <div class="a"><a>忘记密码？</a></div>
            <div class="denli">登录</div>
        </div>
        <div class="zhuce">
            <div class="dl">欢迎注册</div>
            <div><input type="text" placeholder="请输入您的常用邮箱"></div>
            <div><input type="text" placeholder="请输入昵称"></div>
            <div><input type="text" placeholder="请输入密码"></div>
            <div><input type="text" placeholder="请确认密码"></div>
            <div class="a"><a>忘记密码？</a></div>
            <div class="denli">登录</div>
        </div>
    </div>
    <div class="register">
        <div id="qhuanann" class="ann" onclick="doScroll(this)">没有账号？点击注册</div>
    </div>
</div>
<script>
    function doScroll(div) {
        let ddd = document.querySelector(".logon");
        let ann = document.querySelector(".ann");
        let denlu = document.querySelector(".denlu");
        let zhuce = document.querySelector(".zhuce");
        let logon = document.querySelector(".logon");
        let left = window.getComputedStyle(ddd, null).left;
        left = parseInt(left);
        let timer;
        let i = 1;
        let text = ann.textContent;
        if(text==="没有账号？点击注册"){
            denlu.style.display="none";
            zhuce.style.display="block";
            timer = setInterval(function () {
                if (i === 1) {
                    let opacity = 0;
                    let yincang = 1;
                    left += 225;
                    ddd.style.left = left + 'px';
                    ann.style.left = 100 + 'px';
                    let fadeInTimer = setInterval(function () {
                        opacity += 0.01;
                        yincang -= 0.01;
                        ddd.style.opacity = opacity;
                        denlu.style.opacity = yincang;
                        logon.style.borderRadius = 0;
                        if (opacity >= 1) {
                            clearInterval(fadeInTimer);
                        }
                    }, 5);
                    ddd.style.opacity = 0;
                    i++;
                } else {
                    let opacity = 0;
                    left += 225;
                    ddd.style.left = left + 'px';
                    let fadeInTimer = setInterval(function () {
                        opacity += 0.01;
                        ddd.style.opacity = opacity;
                        zhuce.style.opacity = opacity;
                        logon.style.borderRadius="0 10px 10px 0";
                        ann.textContent = "点击前去登录";
                        if (opacity >= 1) {
                            clearInterval(fadeInTimer);
                        }
                    }, 5); // 控制淡入的速度
                    clearInterval(timer);
                }
            },10);
        }else{
            denlu.style.display="block";
            zhuce.style.display="none";
            timer = setInterval(function () {
                if (i === 1) {
                    let opacity = 0;
                    let yincang = 1;
                    left -= 225;
                    ddd.style.left = left + 'px';
                    ann.style.left = "550px";
                    let fadeInTimer = setInterval(function () {
                        opacity += 0.01;
                        yincang -= 0.01;
                        ddd.style.opacity = opacity;
                        zhuce.style.opacity = yincang;
                        logon.style.borderRadius = 0;
                        if (opacity >= 1) {
                            clearInterval(fadeInTimer);
                        }
                    }, 5);
                    ddd.style.opacity = 0;
                    i++;
                } else {
                    let opacity = 0;
                    left -= 225;
                    ddd.style.left = left + 'px';
                    let fadeInTimer = setInterval(function () {
                        opacity += 0.01;
                        ddd.style.opacity = opacity;
                        denlu.style.opacity = opacity;
                        logon.style.borderRadius="10px 0 0 10px";
                        ann.textContent = "没有账号？点击注册";
                        if (opacity >= 1) {
                            clearInterval(fadeInTimer);
                        }
                    }, 5); // 控制淡入的速度
                    clearInterval(timer);
                }
            },10);
        }
    }
</script>
</body>
</html>
